<template>
  <div class="main">
    <!--    <div> 用户信息</div>-->
    <div class="footer"><span>签到天数：{{ punch.punchCount }}</span><span>连续签到：{{ punch.punchStreak }}</span><span>最大签到：{{ punch.punchLongest }}</span>
    </div>
    <div>
      <sa-calendar
        @handleClickDate="handleClickDate"
        :detailkey="detailkey"
        :startWeek="startWeek"
        :data="data"
        :date="date">
      </sa-calendar>
    </div>
    <el-button style="margin-top: 20px;" type="info" round @click="lastMonth(-1)">查看上月</el-button>
    <el-button style="margin-top: 20px;" type="success" v-if="this.now===0" @click="signIn()" round>点击签到</el-button>
    <el-button style="margin-top: 20px;" type="info" round @click="lastMonth(+1)">查看下月</el-button>
  </div>
</template>

<script>

export default {

  data() {
    return {
      user: {},
      punch: {},
      now:0,
      data: [
        //这个数据是封装时使用的,用于考勤的
        {
          "id": 166455,
          "staffName": "张三",
          "staffNumber": null,
          "userId": "021406075729539388",
          "content": "正常",
          "attendanceDate": "2023-04-04", //!! YYYY-MM-DD
          "staffId": null,
          "department": "不动产",
          "type": null,
          "departmentId": null,
          "attendanceGroup": "考勤",
          "position": null,
          "isLate": false,
          "isEarly": false,
          "isAbsence": false,
          "isVacation": false,
          "valid": true,
          "isHoliday": false
        },
        {
          "attendanceDate": "2023-04-06" //!!
        }, {
          "attendanceDate": "2023-04-07" //!!
        }, {
          "attendanceDate": "2023-04-08" //!!
        }, {
          "attendanceDate": "2023-04-09" //!!
        }, {
          "attendanceDate": "2023-04-10" //!!
        }, {
          "attendanceDate": "2023-04-11" //!!
        },

      ],
      startWeek: 1,
      detailkey: 'attendanceDate',      //!! YYYY-MM-DD
      date: new Date(),

    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem('userInfo'))
    this.getSignInList()
    this.signInRecord()
  },
  methods: {
    refreshLocalStorage(user){
      const request = {
        accountNumber: user.accountNumber,
        password: user.password
      }
      this.$axios.post('user/login', request).then(res => {
        if (res.data.code === 20000) { //成功
          this.$message.success(res.data.msg)
          localStorage.setItem("userInfo", JSON.stringify(res.data.data));
          location.reload()
        } else { //失败
          this.$message.error(res.data.msg)
        }
      });
    },
    dateFormat(fmt, date) {
      let ret
      const opt = {
        'y+': date.getFullYear().toString(), // 年
        'M+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'm+': date.getMinutes().toString(), // 分
        's+': date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          )
        }
      }
      return fmt
    },
    // 查看上月
    lastMonth(e){
      this.date.setMonth(this.date.getMonth() + e)
      this.now=this.now+e
      console.log(this.date)
      this.getSignInList()
    },
    getSignInList() {
      let effectStartTime = this.dateFormat('yyyy-MM', this.date)
      this.$axios.get('/record/get_punch?userId=' + this.user.id + '&date=' + effectStartTime).then(res => {

        // console.log(res)
        if (res.status === 200) { //成功
          this.data = res.data.data
        } else { //失败
          this.$message.error(res.data.msg)
        }
      });
    },
    signIn() {
      this.$axios.get('/record/punch_clock?userId=' + this.user.id).then(res => {

        // console.log(res.data)
        if (res.status === 200) { //成功
          // this.$message.success(res.data.msg)
          this.refreshLocalStorage(this.user)
          // location.reload()
        } else { //失败
          this.$message.error(res.data.msg)
        }
      });
    },
    signInRecord() {
      this.$axios.get('/record/count?userId=' + this.user.id).then(res => {

        // console.log(res)
        if (res.status === 200) { //成功
          // this.$message.success(res.data.msg)
          this.punch = res.data.data;

        } else { //失败
          this.$message.error(res.data.msg)
        }
      });
    },
    handleClickDate(item) {
      // {active,dateStr,day,month,year,status,detail}
      // console.log(item)
    }
  }
}
</script>
<style>
.el-main {
  width: 80%;
  text-align: center;
  margin: auto;
}

.footer {
  display: flex;
  justify-content: space-around;
}
</style>
